<template>
  <div>
    <div id="iot-combo-group-set" class="set-wrap-2">
      <el-form ref="form_ref" :model="form" label-width="110px" label-position="right" :rules="form_rules">
        <el-row>
          <el-col :span="11" class="panel-left">
            <el-form-item label="所属应用商" prop="agent_app_id">
              <el-select v-model="form.agent_app_id" placeholder="请选择应用商编号" :disabled="form.id > 0">
                <el-option v-for="(item, index) in dic[$api.Enum.DicTypeResellerList]" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名称" prop="title">
              <el-input v-model="form.title" placeholder="请输入组名称"></el-input>
            </el-form-item>
            <el-form-item label="流量倍率" prop="flow_ratio">
              <el-input v-model="form.flow_ratio" placeholder="请输入输入 1.00~3.00 的值，支持两位小数"></el-input>
            </el-form-item>
            <el-form-item label="语音倍率" prop="voice_ratio">
              <el-input v-model="form.voice_ratio" placeholder="请输入输入 1.00~3.00 的值，支持两位小数"></el-input>
            </el-form-item>

            <el-form-item label="周期类型" prop="cycle_mode">
              <el-select v-model="form.cycle_mode" :clearable="false" :disabled="form.id > 0">
                <el-option v-for="(item, index) in dic[$api.Enum.DicTypeComboGroupMode]" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主套餐类型" prop="main_package_type">
              <el-select v-model="form.main_package_type" :clearable="false" :disabled="form.id > 0">
                <el-option v-for="(item, index) in dic[$api.Enum.DicTypeMainComboType]" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流量类型" prop="flow_type">
              <el-select v-model="form.flow_type" placeholder="请选择数据类型" :disabled="form.id > 0">
                <el-option v-for="(item, index) in dic[$api.Enum.DicTypeComboGroupType]" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单卡流量" prop="base_flow" v-show="form.flow_type===2">
              <el-input v-model="form.base_flow" placeholder="流量池单个号码基础流量" :clearable="false">
                <template slot="append">MB</template>
              </el-input>
            </el-form-item>
            <el-form-item label="超池行为" prop="excess_pool_action" v-show="form.flow_type===2">
              <el-select v-model="form.excess_pool_action" :clearable="false">
                <el-option v-for="(item, index) in dic[$api.Enum.DicExcessAction]" :key="index" :label="item.name" :value="item.id">
                  <span style="float: left">{{item.name}}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{form_desc.excess_pool_action[item.id]}}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="超量行为" prop="excess_card_action" v-show="form.flow_type===2">
              <el-select v-model="form.excess_card_action" :clearable="false">
                <el-option v-for="(item, index) in dic[$api.Enum.DicExcessAction]" :key="index" :label="item.name" :value="item.id">
                  <span style="float: left">{{item.name}}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{form_desc.excess_card_action[item.id]}}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="销售模式" prop="sale_mode">
              <el-radio v-for="(item, index) in dic[$api.Enum.DicTypeSalesModel]" :key="index" :label="item.id" v-model="form.sale_mode" :disabled="form.id > 0">{{ item.name }}</el-radio>
            </el-form-item>
            <el-form-item label="运营模式" prop="operating_mode">
              <el-select v-model="form.operating_mode" :clearable="false" :disabled="form.id > 0">
                <el-option v-for="(item, index) in dic[$api.Enum.DicComboOperatingMode]" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13" class="panel-right">
            <h4>设置说明:</h4>
            <ol>
              <li><b>流量倍率、语音倍率</b>
                号码实际用量*倍率=最终显示用量；值范围1.00~3.00
              </li>
              <li><b>销售模式</b>
                <ul>
                  <li><b>返利</b> 应用商设定销售价格，并未下级设定一个佣金比例；下级代理商以此类推。</li>
                  <li><b>成本</b> 应用商设定默认销售价格，并设置一个下级成本价，下级可根据情况再自行设置一个销售价格。</li>
                </ul>
              </li>
              <li><b>提示模式</b> 充值界面的提示</li>
              <li><b>显示模式</b>
                <ul>
                  <li><b>正常</b> 所有套餐正常显示</li>
                  <li><b>首冲</b> 号码首冲时，显示单独设定的主套餐；后续充值显示其余主套餐。如果没有设置对应主套餐，显示所有。</li>
                </ul>
              </li>
              <li><b>周期模式</b>
                <ul>
                  <li><b>单月</b> 用量每月独立，月底交替；长周期包设置用量为每月用量。</li>
<!--                  <li><b>连续月</b> 单次购买的长周期包，每月用量共享，月底交替；设置用量为整个周期的总用量。</li>-->
                  <li><b>跨月</b> 必须运营商支持日用量，从购买日+周期天数，为截止日期；设置用量为整个周期用量。</li>
                </ul>
              </li>
              <li><b>应用商、周期模式、主充值类型</b> 一经创建不可更改，请慎重。</li>
              <li v-show="form.flow_type == 2"><b>单卡流量</b> 流量池组成 = 单卡流量*使用数量（与套餐和扩容包无关）</li>
              <li><b>运营模式</b>
                <ul>
                  <li><b>支付</b> 套餐需要通过公众号订单支付激活，且存在截止月份。</li>
                  <li><b>运营商</b> 套餐可直接激活，不存在截止日期，无法通过公众号充值。</li>
                </ul>
              </li>
            </ol>
          </el-col>
        </el-row>

        <el-form-item class="addButton">
          <el-button type="success" @click="formSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "IotComboGroupSet",
  props:{
    detail: Object // 详情
  },
  data() {
    return {
      type_name: '添加',
      form: {
        id: 0,
        agent_app_id: '',
        title: '',
        flow_ratio: 1.00,
        voice_ratio: 1.00,
        sale_mode: 1,
        operating_mode: 1,
        cycle_mode: 1, // 周期内心：1.单月
        main_package_type: 2,// 主套餐类型：2.周期月
        flow_type: 1,
        base_flow: 0,
        excess_pool_action: 4,
        excess_card_action: 4,
      },
      //验证规则
      form_rules: {
        agent_app_id: {
          required: true,
          validator: (rule, value, callback) => {
            let numberReg = /^\d+$|^\d+[.]?\d+$/;
            if (value !== "") {
              if (!numberReg.test(value)) {
                callback(new Error("请选择应用商!"));
              } else {
                callback();
              }
            } else {
              callback(new Error("请选择应用商!"));
            }
          },
          trigger: "blur"
        },
        title: { required: true, message: "请输入套餐组名称", trigger: "blur" },
        // 自定义验证规则
        flow_type: {
          validator: (rule, value, callback) => {
            if (!value){
              return callback(new Error('请输选择数据类型'))
            }
            if (value == 2 && this.form.cycle_mode == 3){
              return callback(new Error('跨月周期类型不支持流量池'))
            }
            callback()
          },
          trigger: "blur"
        },
        sale_mode: {required: true, message: "请选择销售模式", trigger: "blur"},
        operating_mode: {required: true, message: "请选择运营模式", trigger: "blur"},
        flow_ratio: {
          required: true,
          validator: (rule, value, callback) => {
            if (!value == '') {
              if (value > 3 || value < 1) {
                callback(new Error('请输入1.00-3.00之间的倍率!'))
              }
              callback()
            } else {
              callback(new Error('请输入流量倍率'))
            }
          },
          trigger: "blur"
        },
        voice_ratio: {
          required: true,
          validator: (rule, value, callback) => {
            if (!value == '') {
              if (value > 3 || value < 1) {
                callback(new Error('请输入1-3之间的倍率!'))
              }
              callback()
            } else {
              callback(new Error('请输入语音倍率'))
            }
          },
          trigger: "blur"
        },
        cycle_mode:{
          required: true,
          message: "请选择周期类型",
          trigger: "blur"
        },
        main_package_type: {
          required: true,
          message: "请选择主套餐类型",
          trigger: "blur"
        },
      },
      // 表单描述
      form_desc:{
        excess_pool_action:{
          4: "流量池超出后，停用全部号码",
          11: "流量池超出后，不做动作",
        },
        excess_card_action:{
          4: "单卡超出套餐，停用号码",
          11: "单卡超出套餐，不做动作",
        }
      },
      dic: {}
    };
  },

  mounted() {
    if (this.detail != undefined && this.detail.id > 0){
      this.type_name = '编辑'
      Object.assign(this.form, this.detail)
    }

    this.$api.foundation.dicListExtendCache([
      this.Enum.DicTypeComboGroupType,
      this.Enum.DicTypeComboGroupMode,
      this.Enum.DicTypeComboType,
      this.Enum.DicExcessAction,
      this.Enum.DicTypeSalesModel,
      this.Enum.DicComboOperatingMode,
      this.Enum.DicTypeResellerList,
      this.Enum.DicTypeMainComboType,
      this.Enum.TypeSpeedLimit,
    ], {}, res => {
      this.dic = res
    });
  },

  methods: {
    // 提交表单
    formSubmit() {
      this.$refs.form_ref.validate(valid => {
        if (!valid) {
          return this.$message.error("请完善数据再保存!");
        }
        let body = this.$tool.copyJSON(this.form)
        body.agent_app_id = Number(body.agent_app_id)
        body.flow_ratio = Number(body.flow_ratio)
        body.voice_ratio = Number(body.voice_ratio)
        body.base_flow = Number(body.base_flow)

        if (body.flow_type === this.Enum.FlowTypePool){
          if (!body.base_flow){
            return this.$message.error("基数流量 为必填！");
          }
        }

        if (body.id){
          this.$api.combo.groupEdit(body, res => {
            if (!res.status) {
              this.$message.error(res.message);
            }
            this.$message.success('修改成功!')
            this.$emit('close')
          });
        }else {
          this.$api.combo.groupAdd(body, res => {
            if (!res.status) {
              return this.$message.error(res.message);
            }
            this.$message.success("保存成功!");
            this.$emit('close')
          });
        }
      });
    },
  }
};
</script>